<template>
  <div class="indexTable bgWhite productBasic expandTable" :class="{'tableExpand': !isExpand}" id="productBasic" ref="content">
   <el-form ref="form" class="pb_form">
      <!-- <el-select  v-model="searchForm.product_model_name.value" placeholder="产品型号名称" clearable filterable  @keyup.enter.native="getTableList" @focus="getProductModelName" >
        <el-option v-for="item in productModelNameList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select> -->
      <SearchSelect v-model="searchForm.title.value" :siteId="siteId" placeholder="产品标题"/>
      <!-- <el-select  v-model="searchForm.first_type.value" placeholder="产品标题" filterable @clear="clearFirstType" clearable  @keyup.enter.native="getTableList" @focus="getFirstTypeList">
        <el-option v-for="item in firstTypeList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select> -->
      <el-select  v-model="searchForm.first_type.value" placeholder="一级类型" filterable @clear="clearFirstType" clearable  @keyup.enter.native="getTableList" @focus="getFirstTypeList">
        <el-option v-for="item in firstTypeList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-select  v-model="searchForm.second_type.value" placeholder="二级类型" filterable clearable  @keyup.enter.native="getTableList" @focus="getSecondTypeList">
        <el-option v-for="item in secondTypeList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <!-- <el-select  v-model="searchForm.material_name.value" placeholder="材质名称" filterable clearable  @keyup.enter.native="getTableList" @focus="getMaterialNameList">
        <el-option v-for="item in materialNameList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select> -->
      <el-select  v-model="searchForm.product_name.value" placeholder="产品编码" filterable clearable  @keyup.enter.native="getTableList" @focus="getProductName">
        <el-option v-for="item in productNameList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <!-- <el-select  v-model="searchForm.instructions_type.value" placeholder="说明书类型" filterable clearable 
         @keyup.enter.native="getTableList" @focus="getInstructionsList" >
        <el-option v-for="item in instructionsList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select> -->
      <el-select  v-model="searchForm.tag_type.value" placeholder="标签类型" filterable clearable  @keyup.enter.native="getTableList">
        <el-option v-for="item in tagList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-select  v-model="searchForm.status.value" placeholder="启用状态" clearable  @keyup.enter.native="getTableList" >
        <el-option v-for="item in statusList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-input placeholder="创建人" v-model="searchForm.create_name.value" @keyup.enter.native="getTableList"></el-input>
      <!-- <div class="isExpand" @click="isExpandForm">
        <p class="hide" v-show="isExpand">收起 <i class="iconfont icon-arrow_1"></i></p>
        <p class="expand" v-show="!isExpand">展开 <i class="iconfont icon-arrow_1"></i></p>
      </div> -->
    </el-form>
    <div class="btnContainer" ref="btn">
      <div>
        <!-- <el-button type="search" @click="closeAddDialog" v-if="$_has('/product_basic/add')">添加</el-button> -->
        <AddOrEdit type="search" style="margin-right:10px" @success="getTableList(1)" v-if="$_has('/product_basic/add')"/>
        <el-button type="del"  @click="sureCloseDialog('tag')" v-if="$_has('/product_basic/set_tag')" >标签</el-button>
        <ImportParams style="margin: 0 10px" v-if="$_has('/product_basic/import')"/>
        <el-button type="del" @click="sureCloseDialog('del')" v-if="$_has('/product_basic/del')">删除</el-button>
        <el-button type="del" @click="closeExportDialog()" v-if="$_has('/product_basic/export')">导出</el-button>

      </div>
      <div>
        <el-button type="search" @click="getTableList" v-if="$_has('/product_basic/list')">查询</el-button>
        <el-button type="del" @click="resetForm">重置</el-button>
      </div>
    </div>
    <el-table :data="listTable" :height="tableH" :row-class-name="rowClassName" ref="table" @row-click="RowClick"
     @selection-change="handleSelectionChange" :row-key="function(row){return row.id}" v-loading="loading">
      <el-table-column type="selection" width="64"  fixed="left" :reserve-selection="true"></el-table-column>
      <el-table-column  label="产品标题" width="240" prop="title" align="left"></el-table-column>
      <el-table-column  label="图片" width="80" prop="title" align="center" class-name="filetypeImage">
        <template v-slot="scope">
          <div @click.stop>
            <el-image v-if="scope.row.image"
              style="width: 32px; height: 32px"
              :src="utils.setCdnUrl() + scope.row.image" 
              :preview-src-list="[utils.setCdnUrl() + scope.row.image]">
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column  label="一级类型"  width="160"  prop="first_type" align="left"></el-table-column>
      <el-table-column  label="二级类型"  width="160"   prop="second_type" align="left"></el-table-column>
      <el-table-column  label="产品编码" width="268"  prop="product_name" align="left"> </el-table-column>
      <el-table-column  label="说明书"  width="100" align="center" class-name="options">
        <template v-slot="scope">
          <template v-if="scope.row.instructions">
            <a target="_blank" :href="utils.setCdnUrl() + scope.row.instructions" style="text-decoration: none;"><i class="iconfont icon-details_normal"></i></a>
            <span style="margin-left: 24px;" @click.stop="handleDownload(scope.row)"><i class="iconfont icon-Download"></i></span>
          </template>
        </template>
      </el-table-column>
      <el-table-column  label="产品参数"  width="100" align="center" class-name="options">
        <template v-slot="scope">
          <Parameter title="参数详情" detail>
            <template v-slot="{ on }">
              <i class="iconfont icon-details_normal" title="参数" @click.stop="on(scope.row.product_id)"></i>  
            </template>
          </Parameter>
        </template>
      </el-table-column>
      <el-table-column  label="链接"  width="420" prop="set_link" align="left"></el-table-column>
      <el-table-column  label="标签类型"  prop="tag_type" width="120">
        <template slot-scope="scope" >
          <span>{{getTagTypeName(scope.row.tag_type)}}</span>
          <!-- <span v-if="scope.row.tag_type == 1">NEW</span>
          <span  v-else-if="scope.row.tag_type == 2">HOT</span>
          <span  v-else-if="scope.row.tag_type == 3">Nothing</span> -->
        </template>

      </el-table-column>
      <el-table-column  label="评论数量" width="120"  prop="all_comment_num"></el-table-column>
      <el-table-column  label="评论星级" width="120" prop="star_comment"></el-table-column>
      <el-table-column  label="五星数量" width="120" prop="five_star_num"></el-table-column>
      <el-table-column  label="四星数量" width="120" prop="four_star_num"></el-table-column>
      <el-table-column  label="启用状态" width="120" prop="status">
        <template slot-scope="scope">
          <div @click.stop>
            <el-switch  v-model="scope.row.statusBoolean"  @change="handleSwitch(scope.row)" :disabled="!$_has('/product_basic/status_switch')"></el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column  label="操作时间" width="200"  prop="update_time"></el-table-column>
      <el-table-column  label="创建人"  width="120"    prop="create_name"></el-table-column>
      <el-table-column  label="操作" fixed="right"  width="160"  class-name="options">
        <template slot-scope="scope" >
          <add-or-edit v-if="$_has('/product_basic/edit')" style="margin-right: 24px;" @success="getTableList()">
            <template v-slot="{ on }">
              <i class="iconfont icon-edit_normal" title="编辑" @click.stop="on(scope.row.product_id)"></i>  
            </template>
          </add-or-edit>
          <!-- <i class="iconfont  icon-edit_normal"  v-if="$_has('/product_basic/edit')" title="编辑" @click.stop="setCurRow(scope.row, 'edit')"></i>   -->
          <!-- <i class="iconfont  icon-specs_normal"  v-if="$_has('/product_basic/specification')" title="规格" @click.stop="setCurRow(scope.row, 'spec')"></i>   -->
          <Parameter v-if="$_has('/product_basic/parameter')" style="margin-right: 24px;">
            <template v-slot="{ on }">
              <i class="iconfont icon-Parm" title="参数" @click.stop="on(scope.row.product_id)"></i>  
            </template>
          </Parameter>
          <i class="iconfont  icon-ticle__normal"  v-if="$_has('/product_basic/image')" title="图文" @click.stop="setCurRow(scope.row, 'image')"></i>  
          <i class="iconfont  icon-delete_normal" v-if="$_has('/product_basic/del')" title="删除" @click.stop="setCurRow(scope.row, 'del')" ></i>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination ref="pagination" background :page-sizes="pageSizes" :total="total"  :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"  @size-change="handleSizeChange" :current-page="page"
      @current-change="handleCurrentChange"></el-pagination>
    <Add v-show="addShow" :show="addShow" @closeDialog="closeAddDialog"></Add>
    <Edit v-show="editShow" :id="curId" :show="editShow" @closeDialog="closeEditDialog"></Edit>
    <Del v-show="delShow" :idList="curList" :show="delShow" @closeDialog="closeDelDialog"></Del>
    <Export v-show="exportShow" :show="exportShow" @closeDialog="closeExportDialog"></Export>
    <Tag v-show="tagShow" :show="tagShow" :idList="curList"  @closeDialog="closeTagDialog"></Tag>
    <ImageText v-show="imageTextShow" :id="curId" :show="imageTextShow" @closeDialog="closeImageTextDialog"></ImageText>
    <Specification  v-show="specShow" :id="curId" :row="curRow" :show="specShow" @closeDialog="closeSpecificationDialog"></Specification>
  </div>
</template>

<script>
import { Add, AddOrEdit, Edit, Del, Export, Tag, ImageText, Specification, ImportParams, Parameter, SearchSelect } from './components'
import { productBasicList, erpProducNameList, productStatusSwitch , productModelNameList } from '@/api/product/productBasic.js'
import { firstTypeList, secondTypeList } from '@/api/product/productType.js'
import { setSearchParams, fileDomain } from '@/utils/index.js'
import { typeList } from '@/api/product/instructions.js'
import { NameList } from '@/api/product/material.js'

export default {
  data() {
    return {
      searchForm: {
        title: { value: '', op: 'like' },
        first_type: { value: '',op: '=' },
        second_type: { value: '', op: '=' },
        product_name: { value: '', op: 'like' },
        tag_type: { value: '',op: '=' },
        status: { value: '', op: '=' },
        create_name: { value: '', op: 'like' },
        instructions_type: { value: '', op: '=' },
        material_name:{ value: '', op: '=' },
      },
      firstTypeList: [], //一级类型下拉框
      secondTypeList: [], //二级类型下拉框
      instructionsList: [], //说明书下拉框
      listTable: [  ],
      pageSizes: [20, 50, 100],
      total: 10,
      pageSize: 20,
      page: 1,
      addShow: false,
      editShow: false,
      delShow: false,
      exportShow: false,
      tagShow: false,
      imageTextShow: false,
      specShow: false,
      curList: [],
      curId: null,
      tableH: null,
      curRow: null,
      curIdList: [],
      selectList: [],
      loading: false,
      tagList: [
        {value: 1, label: 'NEW'},
        {value: 2, label: 'HOT'},
        {value: 3, label: 'Nothing'},
        {value: 4, label: '推荐'},
      ],
      statusList: [
        {value: 1, label: '启用'},
        {value: 2, label: '禁用'},
      ],
      productNameList: [],//产品编码下拉框
      productModelNameList: [], //产品型号名称
      materialNameList:[], //材质名称下拉框
      isExpand: false,//展开收起
      siteId: void 0,
    }
  },
  created(){
    this.getTableList()
  },
  mounted(){
    let that = this;
    that.setTableHeight()
    // 注：window.onresize只能在项目内触发1次
    window.onresize = function windowResize () {
        // 通过捕获系统的onresize事件触发我们需要执行的事件
      that.setTableHeight()
    }
  },
  methods: {
    fileDomain,
    getTagTypeName(val) {
      let res = this.tagList.filter(item => item.value == val)
      if(res.length) {
        return res[0].label
      }
      return ''
    },
    getMaterialNameList (){ // 材质名称下拉框
      NameList().then(res=>{
        this.materialNameList = res.data
      })
    },
    isExpandForm () { //展开收起
     
      this.isExpand = !this.isExpand
      if(this.isExpand ) {
        this.tableH = parseInt(this.tableH) - 43 + 'px'
      }else {
        this.tableH = parseInt(this.tableH) + 43 + 'px'
      }

    },
    getInstructionsList() { //说明书类型 下拉框
      typeList().then(res=>{
        this.instructionsList = res.data
      })
    },
    getProductName () {
       erpProducNameList().then(res=>{
        if(res.state == 1){
          this.productNameList = res.data
        }
      })
    },
    getProductModelName () {
      productModelNameList().then(res=>{
        console.log(res)
        if(res.state ==1){
          this.productModelNameList = res.data
        }
      })
    },
    clearFirstType () {
      this.searchForm.second_type.value = ""
    },
    RowClick (row) {
      this.$refs.table.toggleRowSelection(row);
    } ,
    setTableHeight(){
      let searchFormH = this.$refs.form.$el.offsetHeight;
      let manageMenuH = this.$refs.content.offsetHeight;
      let btnContainerH = this.$refs.btn.offsetHeight;
      let paginationH = this.$refs.pagination.$el.offsetHeight
      let tableHeight = manageMenuH  - btnContainerH - searchFormH - paginationH - 48 - 24 - 24
      this.tableH = tableHeight +'px' 
    },
    sureCloseDialog(type){
      if(this.curList.length > 0){
        if(type == 'del'){
          this.closeDelDialog()
        } else  if(type == 'tag'){
          this.closeTagDialog()
        }
      } else {
        let word = "删除"
        if(type == 'tag'){
          word = '打标签'
        }
        this.$message.error('请选择需' + word + '的选项！')
      }
      
    },
    getTableList(page){
      if(/\d+/.test(page)) {
        this.page = page
      }
      this.loading = true
      let params = setSearchParams(this.searchForm, this.pageSize, this.page)
      productBasicList(params).then(res=>{
        let list = res.data.data
        if( list.length == 0 && this.page > 1){
          this.page -= 1
          this.getTableList()
        }
        let  idList = []
        for(let i = 0; i < list.length; i++){
          if(list[i].status == 1) {
            list[i].statusBoolean = true
          } else {
            list[i].statusBoolean = false
          }
          idList.push(list[i].product_id)
        }
        this.curIdList = idList

        this.listTable = list
        this.total = res.data.total
        this.siteId = res.data.data.length && res.data.data[0].site_id
        this.page = res.data.current_page
        this.$refs.table.clearSelection()
        this.loading = false
      })
    },
    handleDownload(item) {
      window.open('/api/api/product_basic/down_load?instructions=' + item.instructions)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getTableList()
     
    },
    handleCurrentChange(val) {
      this.page = val
      this.getTableList()
      this.$refs.table.clearSelection()
    },
    closeAddDialog(){
      this.addShow = !this.addShow
      if(!this.addShow){
        this.getTableList()
      }
    },
    setCurRow(row, type) {
      this.curList = []
      this.curList.push(row.product_id)
      this.curId = row.product_id
      this.curRow = row
      if(type == 'edit'){ 
        this.closeEditDialog()  
      }else if(type == 'del'){
        this.closeDelDialog()
      } else if (type == 'spec'){
        this.closeSpecificationDialog()
      }else if (type == 'image'){
        this.closeImageTextDialog()
      }
      
    },
    closeEditDialog(){
      this.editShow = !this.editShow
      if(!this.editShow){
        this.getTableList()
      }
    },
    closeDelDialog(){
      this.delShow = !this.delShow
      if(!this.delShow){
        this.getTableList()
      }
    },
    closeExportDialog(){
      this.exportShow = !this.exportShow
      if(!this.exportShow){
        this.getTableList()
      }
    },
    closeImageTextDialog () {
      this.imageTextShow = !this.imageTextShow
      if(!this.imageTextShow){
        this.getTableList()
      }
    },
    closeSpecificationDialog () {
      this.specShow = !this.specShow
      if(!this.specShow){
        this.getTableList()
      }
    },
    closeTagDialog () {
      this.tagShow = !this.tagShow
      if(!this.tagShow){
        this.getTableList()
      }
    },
    rowClassName({row}){
      let rowClass = "tableRowClass"
      if(!row.statusBoolean){
        rowClass += ' unchecked'
      }
      if(row.statusSelection){
        rowClass += ' selectRow'
      }
      return rowClass
    },
    handleSwitch(row){
      console.log(row)
      let params = {
        product_id: row.product_id,
        status: ""
      }
      if(row.statusBoolean){
        params.status = 1
      }else{
        params.status = 2
      }
      productStatusSwitch(params).then(res=>{
        this.$message.success('产品启用状态调整' + res.message)
      })
    },
    handleSelectionChange(list){
      let array = []
      for(let i = 0; i < list.length; i++ ){
        array.push(list[i].product_id)
      }
      this.curList = array

      // 选中行的样式赋值
      for(let i in this.selectList){
        this.selectList[i].statusSelection = false
      }
      for (let item in list){
        list[item].statusSelection = true
      }
      this.selectList = list
    },
    getFirstTypeList(){
      firstTypeList().then(res=>{
        this.firstTypeList = res.data

      })
    },
    getSecondTypeList(){ // 二级类型
      let params = {
        first_type: this.searchForm.first_type.value
      }
      if(params.first_type){
        secondTypeList(params).then(res=>{
          this.secondTypeList = res.data
        })
      }else{
        this.$message.error('请先选择一级类型')
      }
    },
     // 重置按钮
    resetForm(){
      for(let item in this.searchForm){
        this.searchForm[item].value =""
      }
      this.getTableList()
    },
  },
  components: { Add, Edit, Del, Export, Tag, ImageText, Specification, ImportParams, AddOrEdit, Parameter, SearchSelect }

}
</script>

<style lang="scss">
@import '@/styles/product/productBasic.scss';
  #productBasic .icon-Download {
    color: #1890ff !important;

    &:hover {
      color: #1d86d4 !important;
    }
  }
</style>